<template>
    <div class="filter-table" style="justify-content: center;display: flex;align-items: center;position: relative;">
        <el-popover ref="filter-popover" popper-class="filterPopo" placement="bottom" trigger="click">

            <div class="" v-if="filterType === 0">
                <div>
                    <el-input v-model="filterObj.inputVal" placeholder="请输入内容" size="mini"></el-input>
                    <div style="display: flex;align-items: center;justify-content: space-between; margin-top: 5px;">
                        <el-button size="mini" @click="filterQuery(0, filterObj.inputVal)">确定</el-button>
                        <el-button size="mini" @click="cleanQuery(0, filterObj.inputVal)">清除筛选</el-button>
                    </div>
                </div>
            </div>

            <div class="" v-if="filterType === 1">
                <div class="">
                    <el-radio-group v-model="filterObj.checkId" style="padding: 0;margin-top: 0;width: 100%;">
                        <el-radio v-for="(item) in radioList" :key="item.id"
                            style="margin: 5px 0;text-align: center;width: 90%;display: flex;" :label="item.id">{{
                                    item.radioName
                            }}</el-radio>
                    </el-radio-group>
                </div>
                <div style="display: flex;align-items: center; margin-top: 5px;">
                    <el-button size="mini" @click="filterQuery(1, filterObj.inputVal)">确定</el-button>
                    <el-button size="mini" @click="cleanQuery(1, filterObj.checkId)">清除筛选</el-button>
                </div>
            </div>

            <div class="" v-if="(filterType === 3)">
                <div class="">
                    <el-date-picker v-model="filterObj.dateVal" type="date" size="mini" placeholder="选择日期">
                    </el-date-picker>
                </div>
                <div style="display: flex;align-items: center; margin-top: 5px;">
                    <el-button size="mini" @click="filterQuery(1, filterObj.inputVal)">确定</el-button>
                    <el-button size="mini" @click="cleanQuery(1, filterObj.checkId)">清除筛选</el-button>
                </div>
            </div>
            <span slot="reference" class="set"><i class="el-icon-setting"></i></span>
        </el-popover>

    </div>
</template>

<script>
export default {
    name: 'filterTable',
    props: {
        filterType: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            radioList: [
                {
                    id: 1,
                    radioName: '未完成'
                },
                {
                    id: 2,
                    radioName: '已完成完成'
                },
                {
                    id: 3,
                    radioName: '未涉及'
                }
            ],
            filterObj: {
                inputVal: '',
                checkId: 0,
                dateVal: ''
            }
        }
    },
    created() {
        console.log(this.filterType, "父传子")
    },
    methods: {
        //过滤筛选
        filterQuery(value) {
            this.$emit("getValue", value)
        },
        cleanQuery(value) {
            this.$emit("getValue", value)
        }
    }
}
</script>

<style lang="less">
.set {
    cursor: pointer;
    &:hover {
        color: #409EFF;
    }
}
</style>